PAGE=$.extend(PAGE,{
	"leftMenu":function(opt){
		this.settings=$.extend({
			"arrow":true
		},opt);
		this.view=new (Backbone.View.extend({
		    "tagName":"div",
		    "className":"el-wrapper",
		    "template":_.template(PAGE.templates.leftMenu()),
		    "render":function(json){  
		        this.$el.html(this.template(json));
		        return this.$el;
		     }
		}))();
		this.dom=this.view.render(opt);
		this.dom.attr("data-id",this.settings.id).attr("data-role","leftMenu");
		
		//===

    	var $menu=this.dom,showArrow=this.settings.arrow;
    	$menu.off("click");
    	$menu.on("click",function(event){event.stopPropagation();});
    	$menu.find(".menu-lv1>li").each(function(){
    		$(this).off("click");
			$(this).on("click",function(){
				$(this).siblings().removeClass("active");
				$(this).addClass("active");
			});
			$(this).unbind("hover");
			$(this).hover(function(event){
				if($(this).siblings(".active").length>0){
					$(this).siblings(".active").removeClass("active");
				}
			},function(){});
		});
		$menu.find(".menu-lv2>li:not('.leaf')").each(function(){
			$(this).off("click");
			$(this).on("click",function(){
				$(this).toggleClass("active");
				if($(this).hasClass("active")){
					$(this).siblings().removeClass("active");
				}
			});
		});
		$menu.find(".menu-lv2").css("left",this.wrapper.width()+"px");
		if(typeof(showArrow)=="string"&&showArrow.length>1&&showArrow.charAt(0)=="#"){
			$menu.find(".itemv1-arrow").each(function(){$(this).css("background-color",showArrow);});
		}
		$menu.find(".menu-lv2>.leaf,.menu-lv3>.leaf").each(function(){$(this).off("click");});
		$menu.find(".leaf").each(function(){
			$(this).on("click",function(menu,$leaf,showArrow){
				return function(event){
					event.stopPropagation();
					menu.$el.find(".leaf").removeClass("active");
					$leaf.addClass("active");
					var $li1=$leaf.parent().hasClass("menu-lv1")?$leaf:menu.$el.find(".menu-lv1").children("li:has('.leaf.active')");
					if(!$li1.hasClass("static")){$li1.addClass("static");}
					if(!$li1.hasClass("active")){$li1.addClass("active");}
					$li1.siblings().removeClass("static").removeClass("active");
					if(showArrow){
						menu.$el.find(".itemv1-arrow").hide();
						menu.$el.find(".static>.itemv1-arrow").show();
					}
					var arr=[],
				  	  getTxt=function($dom){
					  	arr.push($dom.attr("data-id")+"→"+$.trim($dom.children("nobr").text()));
					  	if(!$dom.parent().hasClass("menu-lv1")){
					  		$dom=$dom.parent().closest("li");
					  		getTxt($dom);
					  	}else{
					  		$dom=$dom.parent().closest("li");
					  		arr.push($dom.attr("data-id")+"→"+$.trim($dom.children("nobr").text()));
					  	}
		  	    	 };
				  getTxt($leaf);
				  arr.reverse();
				  if(arr.length>1)arr.shift();
					menu.events.onclick($leaf,arr);
				};
			}($menu,$(this),showArrow));
		});
		$("body").on("click",function(menu){
			return function(){
				menu.find(".menu-lv1>.active").removeClass("active");
			};
		}($menu));
    
		//===
	}
});
PAGE.leftMenu.prototype.to=function($wrapper){
	$wrapper.append(this.dom);
	return this;
}
PAGE.leftMenu.prototype.getDom=function(){
	return this.dom;
}
PAGE.leftMenu.prototype.resize=function(){
	return this;
}
PAGE.templates.leftMenu=function(){
	var arr=[];
	arr.push('<ul class="menu-lv1">');
	arr.push('{for(var i=0;i<data.length;i++){var item=data[i];}');
	arr.push('<li data-id="{-item.id}" {if(!item.children){}class="leaf"{}}><div class="icon {-item.icon}"></div><nobr>{-item.text}</nobr>');
	arr.push('<div class="itemv1-arrow"></div>');
	arr.push('{if(typeof(item.children)=="object"){}');
	arr.push('<ul class="menu-lv2 bg-c4">');
	arr.push('{for(var j=0;j<item.children.length;j++){var itemv2=item.children[j];}');
	arr.push('<li data-id="{-itemv2.id}" {if(!itemv2.children){}class="leaf"{}}><nobr>{-itemv2.text}</nobr>');
	arr.push('{if(typeof(itemv2.children)=="object"){}');
	arr.push('<span class="arrow"></span>');
	arr.push('<ul class="menu-lv3 bg-c4">');
	arr.push('{for(var k=0;k<itemv2.children.length;k++){var itemv3=itemv2.children[k];}');
	arr.push('<li data-id="{-itemv3.id}" title="{-itemv3.text}" class="leaf">');
	arr.push('<nobr>{-itemv3.text}</nobr>');
	arr.push('</li>');
	arr.push('{}}');
	arr.push('</ul>');
	arr.push('{}}');
	arr.push('</li>');
	arr.push('{}}');
	arr.push('</ul>');
	arr.push('{}}');
	arr.push('</li>');
	arr.push('{}}');
	arr.push('</ul>');
	return arr.join("");
};
